<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>


    <link rel="stylesheet" href="demo/css/poster.css" />
    <link rel="stylesheet" href="demo/css/jQuery.ContextMenu.css" />
    <style>
        #editContainer {
            background-size: 320px 504px;
            display: block;
            position: relative;
            width: 320px;
            height: 504px;
            border: solid 1px #000;
            -moz-background-size:cover;
            -webkit-background-size:cover;
            -o-background-size:cover;
            background-size:cover;
            background-image: url("{$vo.poster_background}");
        }
    </style>

    <script type="text/javascript" src="demo/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="demo/js/jQuery.ContextMenu.js"></script>
    <script type="text/javascript" src="demo/js/designer.js"></script>
    <script type="text/javascript" src="demo/js/poster.js"></script>
</head>
<body>
<!--被编辑的主区域；这个盒子应该是固定大小的，或者你可以通过用户上传的背景图片来确定大小-->
<div id="editContainer">
    <!--
        如下三个盒子是可以编辑大小的
        type属性，取值img,name,qr；分别代表图片，文字，二维码
            当type=qr时，缩放是按照比例进行的
        index属性，自己编辑，不要重复

        style中的位置，是为了，区分开位置的
    -->
    <!--<div class="drag" type="img" index="1" style="top:100px;left:10px;">-->
        <!--<img src="demo/img/default.jpg" alt="">-->
    <!--</div>-->
    <!--<div class="drag" type="name" index="2" style="top:220px;left:10px;">-->
        <!--昵称-->
    <!--</div>-->
    <!--<div class="drag" type="qr" index="3" style="top:100px;right:10px;width:120px;height:120px;">-->
        <!--<img src="demo/img/qr.png" alt="">-->
    <!--</div>-->
</div>
<p>海报背景大小建议尺寸为: 640 * 1008</p>
<input type="button" class="newDrag" data-type="name" value="名称">
<input type="button" class="newDrag" data-type="qr" value="二维码">
<input type="button" class="newDrag" data-type="img" value="头像">
<input type="hidden" name="imgUrl" value="{$vo.backgroud_path}">


<form id="formImg" action="{:U('Activity/uploadImg')}" method="post" target="hidden_frame" enctype="multipart/form-data">
    <div class="fromtrs">
        <label>*活动海报：</label>
        <input id="AidImg" class="sstp" type="file" name="AidImg" onchange="uploadImg()"/>
        <div class="sjjt" style="display:none;" id="imgError">
            <div class="bzsj_left"></div>活动海报不可为空</div>
    </div>
</form>
<iframe style="display:none" name='hidden_frame' id="hidden_frame"></iframe>





<script>
    var pic_root = "<?=PIC_ROOT?>";
    var watermark = '{$vo.poster_params}';

    var watermarks = watermark?JSON.parse(watermark):null;
    var index = 0;
    console.dir(watermarks);
    $(function () {

        function addDragEvent(obj) {
            var litTrigger = '<div class="dRightDown"> </div><div class="dLeftDown"> </div><div class="dRightUp"> </div><div class="dLeftUp"> </div><div class="dRight"> </div><div class="dLeft"> </div><div class="rUp"> </div><div class="rDown"></div>';
            $(obj).append(litTrigger);
            dragEvent($(obj));
        }
        init();
        function init() {
            if (watermarks) {
                watermarks.forEach(function(data){
                    createWatermark(data.type,data.x,data.y,data.w,data.h);
                });
            }

        }

//        //为可编辑的盒子绑定 resize和drag
//        $('.drag').each(function () {
//            addDragEvent(this);
//        });

        //增加一个
        $(".newDrag").click(function () {
            var type = $(this).attr('data-type');
            console.log(type);

            createWatermark(type);

        });

        function createWatermark(type,x,y,w,h) {
            var newDiv = $("<div></div>").attr({"class": "drag", "type": type});
            if (type == 'img') {
                newDiv.append($("<img>").attr({"src": "demo/img/default.jpg"}));
            }
            if (type == 'name') {
                newDiv.append("昵称");
            }
            if (type == 'qr') {
                newDiv.append($("<img>").attr({"src": "demo/img/qr.png"}));
            }
            newDiv.css('left',x);
            newDiv.css('top',y);
            newDiv.css('width',w);
            newDiv.css('height',h);
            newDiv.attr("index", newDiv.index() + 1);
            $("#editContainer").append(newDiv);

            addDragEvent(newDiv);
        }

    });



    function uploadImg()
    {
        var names=$("#AidImg").val().split(".");
        if(names[1]!="gif"&&names[1]!="GIF"&&names[1]!="jpg"&&names[1]!="JPG"&&names[1]!="png"&&names[1]!="PNG")
        {
            $("#imgError").html("<div class='bzsj_left'></div>"+"海报必须为gif,jpg,png格式");
            $("#imgError").show();
            return;
        }
        $("#formImg").submit();
    }

    function callback(message,success)
    {
        if(success==false)
        {
            $("#imgError").html("<div class='bzsj_left'></div>"+message);
            $("#imgError").show();
        }
        else{
            $("#imgError").hide();
            var paths=message.split("/");
//            $("#img").attr("src",message);
            $("input[name='imgUrl']").val(message);
            $("#editContainer").css("background-image", "url(" + pic_root + message + ") ");
        }
    }
</script>



</body>
</html>
